<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
            .input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl font-bold">1024<span class="text-secondary">导航</span></div>
                <span class="hidden md:inline-block text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">v2.3</span>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="resources.html" class="text-gray-600 hover:text-primary transition-colors">资源</a>
                <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区</a>
                <a href="about.html" class="text-gray-600 hover:text-primary transition-colors">关于</a>
            </nav>

            <div class="flex items-center space-x-3">
                <button class="md:hidden text-gray-600 text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 登录区域 -->
    <section class="flex-grow py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-md mx-auto">
                <div class="text-center mb-8">
                    <h1 class="text-[clamp(1.5rem,4vw,2rem)] font-bold mb-2 text-gradient">账号登录</h1>
                    <p class="text-gray-600">登录后可使用更多功能，管理您的收藏和贡献</p>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 card-hover">
                    <!-- 登录表单 -->
                    <form id="loginForm" class="space-y-5">
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <input type="email" id="email" placeholder="请输入您的邮箱"
                                    class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-all">
                            </div>
                        </div>

                        <div>
                            <div class="flex justify-between items-center mb-1">
                                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                                <a href="#" class="text-sm text-primary hover:underline">忘记密码？</a>
                            </div>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-lock"></i>
                                </div>
                                <input type="password" id="password" placeholder="请输入您的密码"
                                    class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus transition-all">
                                <button type="button" id="togglePassword"
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="flex items-center">
                            <input type="checkbox" id="rememberMe"
                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="rememberMe" class="ml-2 block text-sm text-gray-700">记住我 30 天</label>
                        </div>

                        <button type="submit"
                            class="w-full px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium text-base flex items-center justify-center">
                            <i class="fa fa-sign-in mr-2"></i> 登录账号
                        </button>
                    </form>

                    <!-- 分隔线 -->
                    <div class="my-6 flex items-center">
                        <div class="flex-grow border-t border-gray-200"></div>
                        <span class="px-3 text-sm text-gray-500">其他登录方式</span>
                        <div class="flex-grow border-t border-gray-200"></div>
                    </div>

                    <!-- 社交登录 -->
                    <div class="grid grid-cols-3 gap-3">
                        <button
                            class="flex items-center justify-center py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
                            <i class="fa fa-github text-xl"></i>
                        </button>
                        <button
                            class="flex items-center justify-center py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
                            <i class="fa fa-google text-xl"></i>
                        </button>
                        <button
                            class="flex items-center justify-center py-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-700">
                            <i class="fa fa-weixin text-xl"></i>
                        </button>
                    </div>

                    <!-- 注册链接 -->
                    <div class="mt-8 text-center">
                        <p class="text-gray-600">还没有账号？
                            <a href="register.html" class="text-primary font-medium hover:underline ml-1">立即注册</a>
                        </p>
                    </div>
                </div>

                <!-- 安全提示 -->
                <div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-700">
                    <div class="flex items-start">
                        <i class="fa fa-info-circle mt-0.5 mr-2"></i>
                        <p>我们重视您的账号安全，不会向您索要密码或发送可疑链接。请妥善保管您的账号信息。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">最新收录</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门推荐</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">关于我们</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">网站介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 1024导航. 本站资源仅供学习交流使用，如有侵权请联系删除。</p>
            </div>
        </div>
    </footer>

    <script>
        // 密码显示/隐藏功能
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // 切换图标
            togglePassword.querySelector('i').classList.toggle('fa-eye');
            togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
        });

        // 登录表单提交处理
        const loginForm = document.getElementById('loginForm');

        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();

            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value.trim();

            // 简单验证
            if (!email) {
                alert('请输入邮箱');
                return;
            }

            if (!password) {
                alert('请输入密码');
                return;
            }

            // 模拟登录请求
            alert(`登录信息：\n邮箱：${email}\n密码：${password}\n\n在实际应用中，这里会发送登录请求到服务器`);
        });

        // 导航栏滚动效果
        const header = document.querySelector('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }
        });
    </script>
</body>

</html>